5-2. プロパティ設定方針

更新によって頻繁に要素が差し替わったり連番どおりの順番でなくなる可能性のあるものは疑似要素を使った指定は行わずクラスを作成してください。

line-heightには固定の高さを指定したい場合を除き単位は指定しないでください。

要素の階層や設定値は極力減らすよう心がけ、少ない変更で修正が完結できるようにプロパティを設定してください。(NG例:親要素に幅やpaddingを指定せずに子要素全てに左右のマージンをつけたりすること)

隣接する要素同士の余白はマージンを使用し親要素と子要素間の余白にはパディングを使用することでマージンとパディングは適切に使い分けてください。(フレキシブルな設定でマージンによる設定だと不都合がある場合は例外として処理可)

マージンは可能な限り下・右方向で統一してください。2つ以上の要素を指定する場合はショートハンドを利用してください。

不要な要素まで上書きしてしまう可能性があるため、実質強制的に設定を上書きする用途のユーティリティクラスにはショートハンドを利用しないでください。

更新性が落ちる場合もショートハンドは利用しないでください。(NG例:モディファイアクラス全てに背景のショートハンドでリピートや背景色の設定まで個別に行ってしまう)

要素のレイアウトにはflexの使用を推奨とします。floatの使用は禁止ではありませんが非推奨となります。

フロートをかける要素には必ず幅を指定するようにしてください(回り込みを意図する場合は不要です。)

フォントや幅の設定値はpxとし可変幅の物にのみ%で指定してください。(vw、vhはがウィンドウ比率に合わせて指定したい場合のみ使用可とします)

0の設定値には値を付けないでください。

static、relative要素へのネガティブマージンは禁止します。(前後要素に影響を与え、修正や更新の際に問題が多いため)

floatの解除にoverflowを用いることを禁止します、clearfixを使用してください。(ポジションを使った内部要素が見切れる。ブラウザによってスクロールバーが表示されるといった問題が多いため)

ユーティリティクラス以外でimportantは指定しないでください。

メディアクエリの設定は元の要素の近くに記述してください。また、メディアクエリによって変更するクラスの設定は、差分のみ記述し同じ設定を再度記述しないでください。

results matching ""

    No results matching ""